<template>
    <div id='container'></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Chart } from '@antv/g2'

let chart
let data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
]

onMounted(() => {
    chart = new Chart({
        container,
        autoFit: true,
    });

    chart
        .title('基础折线图')
        .data(data)
        .encode('x', 'year')
        .encode('y', 'value')
        .scale('x', {
            range: [0, 1]
        })
        .scale('y', {
            domainMin: 0,
            nice: true
        })
    
    chart.line().label({
        text: 'value',
        style: {
            dx: -10,
            dy: -12
        }
    })
    // 将折线中间的小圆点变成白色空心且不需要tooltip
    chart.point().style('fill', '#fff').tooltip(false)

    chart.render();
});

// 销毁
onUnmounted(() => {
    chart.destroy();
    chart = null;
});
</script>

<style lang='less' scoped>
#container {
    width: 800px;
    height: 400px;
}
</style>